<template>
    <div style="z-index:999">
        <div class="sub">
            <div class="imgs" @click="goby"><img :src="img1"/></div>
            <div class="inp">
                <input type="text" :placeholder="this.place" @click.stop="show" @blur="hide">
            </div>
            <div class="search"><img :src="img2"/></div>
        </div>
        <div class="fon" v-show="isshow">
            <div>
                <div class="title"><strong>热门搜索</strong></div>
                <div>
                    <ul>
                        <li v-for="(p,i) in this.list" :key="i">{{p[++i]}}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import img1 from '../assets/1.png'
import img2 from '../assets/1.webp'
import axios from 'axios'
export default {
    data(){
        return{
            img1,
            input:'',
            img2,
            place:'',
            list:[],
            isshow:false
        }
    },
    created(){
        axios('/ms/store/api/searchsuggest/get').then(
            resp=>{
                this.place=resp.data.data.defaultKey 
                this.list=resp.data.data.configKey
            }
        )
    },
    methods:{
        show(){
            this.isshow=true
        },
        hide(){
            this.isshow=false
        },
        goby(){
            this.$router.push({name:'first'})
        }
    }
}
</script>

<style lang="scss" scoped>
    .sub{ 
        background-color: #FFFFFF;
        display: flex;
        flex-direction: row;
        .imgs{
            width: 30%;
            height: 42px;
            img{ 
                width: 100%;
                height: 100%;
            }   
        }
        .inp{
            width: 60%;
            height: 38px; 
            input{
            width: 100%;
            height: 100%;
            border-radius: 15px;
            outline:medium;
            }
        }
        .search{
            margin-left: 4px;
            width: 10%;
            height: 42px;
            img{
            width:100%;
            height:40px;
            }
        }
    }
    .fon{
        z-index: 999;
        margin-top: 5px;
        font-size: 10px;
        .title{
            margin-top: 5px;
        }
        background-color: whitesmoke;
        box-shadow: 1px  2px  3px  4px  #888888;
        position: absolute;
        width: 60%;
        left: 30%;
        li{
            margin-top:6px;
            list-style: none;
        }
    }
</style>